<template>
  <a-card :title="$t('Survey Review')">
    <a-table bordered :dataSource="dataSource" :columns="columns">
      <template #bodyCell="{ column, record }">

        <template v-if="column.key === 'auditStatus'">
          <a-tag :color="'green'"> {{record.auditStatus}} </a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button type="link" @click="checkSurvey(record, 'audit')">Audit Survey</a-button>
        </template>
      </template>
    </a-table>
  </a-card>
  <a-modal v-model:open="open" :title="$t('Survey Review')" width="50vw">
    <a-form layout="vertical" :disabled="handleType !== 'edit'">
      <a-form-item>
        <h1>{{currentSurvey.title}}</h1>
        <p>{{$t('Survey Points')}}: {{currentSurvey.points}}  &nbsp;&nbsp;&nbsp;&nbsp; {{$t('Expiration Time')}}: {{currentSurvey.expireTime}}</p>
      </a-form-item>
      <a-form-item v-for="(item, index) in currentSurvey.questions" :key="item.id" :label="`${index + 1}.${item.question}`">
        <a-radio-group v-model:value="item.userAnswer" v-if="item.questionType === 0 || item.questionType === '0'">
          <a-radio v-for="option in item.options" :key="option.id" :value="option.questionOption">
            {{option.questionOption}}. {{option.content}}
          </a-radio>
        </a-radio-group>
        <a-checkbox-group v-model:value="item.userAnswer" v-if="item.questionType === 1 || item.questionType === '1'" name="checkboxgroup">
          <a-checkbox v-for="option in item.options" :key="option.id" :value="option.questionOption">
            {{option.questionOption}}. {{option.content}}
          </a-checkbox>
        </a-checkbox-group>
        <a-textarea v-if="item.questionType === 2 || item.questionType === '2'" style="max-height:100px;min-height:100px" :rows="4" :value="item.userAnswer" />
      </a-form-item>

    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="open = false">{{$t('Close')}}</a-button>
        <a-button type="primary" danger v-if="handleType === 'audit'"  @click="handleAuditSurvey('REFUSE')">{{$t('Reject')}}</a-button>
        <a-button type="primary" v-if="handleType === 'audit'" @click="handleAuditSurvey('PASS')">{{$t('Pass')}}</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import {
  AuditOutlined,
  EditOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { message } from "ant-design-vue";

const { t } = useI18n();
import { auditSurveyDetail, waitingAuditSurveys, auditSurvey } from "../../api/survey";
const dataSource = ref([]);
const columns = ref([
  { title: t("Survey Title"), dataIndex: "title", key: "title", ellipsis: true},
  { title: t("Survey Points"), dataIndex: "points", key: "points", width: 200 },
  { title: t("Status"), dataIndex: "auditStatus",  key: "auditStatus",  width: 200, },
  { title: t("Action"), dataIndex: "action", key: "action", width: 200, align: 'center'},
]);
const userInfo = JSON.parse(window.localStorage.getItem("user_info"));

const open = ref<boolean>(false);
const handleType = ref<string>();
const currentSurvey = ref();
const currentUserSurveyId = ref()
const checkSurvey = (item: any, type: string) => {
  auditSurveyDetail({userId: item.userId, surveyId: item.surveyId}).then(res => {
    if (res.status == 200) {
        currentUserSurveyId.value = item.userSurveyId
        open.value = true;
        handleType.value = type;
        currentSurvey.value = res.data.data;
        
        currentSurvey.value.questions.forEach(element => {
          if(element.questionType === 1 ||element.questionType === '1'){
            element.userAnswer = element.userAnswer.split(",")
          }
        });
    }
  })
};

const handleAuditSurvey = (type: string) => {
    let params = {
      "userSurveyId": currentUserSurveyId.value,
      "auditStatus": type
    }
    auditSurvey(params).then(res => {
        if (res.status == 200) {
            open.value = false;
            querySurveyList();
            message.success("Review successful")
        }
    })
}

const querySurveyList = () => {
  let params = {};
  waitingAuditSurveys(params).then((res) => {
    if (res?.status == 200) {
      dataSource.value = res?.data?.data;
    }
  });
};

querySurveyList();

</script>
<style scoped>
.servey-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.servey-list-item {
  width: 22.5%;
  margin-bottom: 20px;
}
</style>